<template>
<div>
  <Header :title="title"></Header>

  <div class="upload" v-if="url !== null">
    <van-image
        round
        width="10rem"
        height="10rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        @click="upload"
    />
    <van-divider>{{userInfo.username}}</van-divider>
  </div>





<!-- 留言记录 -->
  <van-collapse v-model="activeNames">
    <van-collapse-item name="1">
      <template #title>
        <div>留言记录 <van-icon name="question-o" /></div>
      </template>
<!--      点击username查看记录-->
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <template  v-for="(item,index) in list" >
          <van-swipe-cell @click="showPopup(item)" :key="index"  :title="item" :before-close="beforeClose">
            <template #left>
              <van-button square type="primary" text="详情" />
            </template>
            <van-cell :border="false" :title="item" value="内容" />
            <template #right>
              <van-button @click="deleteUser(item)" square type="danger" text="删除" />
            </template>
          </van-swipe-cell>
        </template>
      </van-list>




    </van-collapse-item>
  </van-collapse>
</div>
</template>

<script>
import Header from "../components/Header";
import {Dialog, Toast} from "vant";

import {getNames,deleteAllSay} from "../utils/api";

export default {
  components:{
    Header,
  },
  name: "Info",
  data(){
    return {
      show:true,
      url: this.$store.getters.getUserInfo.url,
      actions: [{name: '查看详情'}, {name: '删除用户'}],
      showList: {
        show: false
      },
      userInfo: {
        username: this.$store.getters.getUserInfo.username,
        age: this.$store.getters.getUserInfo.age,
      },
      title: '个人中心',
      activeNames: ['1'],
      /*下拉组件*/
      list: ['a','b','c','d'],
      loading: false,
      finished: false,

    }
  },
  methods:{
    upload(val){


    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      console.log(this.$store.getters.getUserInfo.url)
    },
    /*下拉组件*/
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {

        //查询数据

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 0) {
          this.finished = true;
        }
      }, 1000);
    },
    showPopup(item){
      this.showList.show = true
    },
    deleteUser(item){
      console.log('删除',item)
    },
    // position 为关闭时点击的位置
    // instance 为对应的 SwipeCell 实例
    beforeClose({ position, instance }) {
      const name = instance.$attrs.title
      const userId = this.$store.getters.getUserInfo.id
      console.log(instance)
      switch (position) {
        case 'left':
          this.$router.push({path:'/infoDetail/'+name})
          break
        case 'cell':
        case 'outside':
          instance.close();
          break;
        case 'right':
          Dialog.confirm({
            message: '确定删除写给'+instance.$attrs.title+'的留言'+'吗？',
          }).then(async () => {

            /*删除请求*/
            const {data: res} = await deleteAllSay(name,userId)
            if(res.code === 100){
              this.success()
            }

            this.list.splice(this.list.indexOf(instance.$attrs.title),1)
            instance.close();
          });
          break;
      }
    },
    async init(){
      const id = this.$store.getters.getUserInfo.id
      const res = await getNames(id)
      console.log("个人留言信息")
      console.log(res)

      this.list = []
      //vue
      res.data.list.forEach(item => {
        this.list.push(item)
      })

      //java
      // res.data.forEach(item => {
      //   this.list.push(item)
      // })
    },
    success(){
      Dialog.alert({
        title: '消息',
        message: '删除成功',
        theme: 'round-button',
      }).then(() => {
        // on close
      });
    },

  },
  created() {
    console.log('login',this.$store.getters.getLogin)
    this.init()
  }
}
</script>

<style scoped lang="less">
.upload{
  text-align: center;
  margin: 15px auto;

}
.gopath{
  margin: 40px 50px;
}

</style>